import React, { useEffect, useState } from 'react';
import styles from './index.less'
import HeaderPng from './homeHeader.png'
import { request } from 'umi';
import { Button, DatePicker, Table } from 'antd';
import moment from 'moment';
import jsondata from './ydxs'
import jsonZtdata from './ydxsZT'
const { RangePicker } = DatePicker;
export default () => {
  const [tags, settags] = useState([]);
  const [activeTags, setactiveTags] = useState([]);
  const [checkedactiveTags, setcheckedactiveTags] = useState([]);
  const [startdate, setstartdate] = useState('');
  const [enddate, setendtdate] = useState('');
  const [surestartdate, setsurestartdate] = useState([]);
  const [sureenddate, setsureendtdate] = useState([]);
  const [list, setlist] = useState([]);
  useEffect(() => {
    request('/api/dataEncyclopedia/tags/list', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: { "current": 1, "pageSize": 10000, "pageNo": 1 }
    }).then((res) => {
      settags(res?.data || [])
    })

  }, [])
  const TagChange = (id: string) => {
    console.log(id);
    let nactiveTags = activeTags.concat([]);
    if (nactiveTags.indexOf(id) == -1) {
      nactiveTags.push(id);
    } else {
      nactiveTags.splice(nactiveTags.indexOf(id), 1);
    }

    setactiveTags(nactiveTags);
  }
  const sure = () => {
    setcheckedactiveTags(activeTags)
    setsurestartdate(startdate);
    setsureendtdate(enddate);
  }
  useEffect(() => {
    if (checkedactiveTags.length == 0) {
      return;
    }
    request('/api/dataEncyclopedia/getData', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: { tags: checkedactiveTags }
    }).then((res) => {
      // setlist(res?.data || []);
      setlist([{
        "tagName": '月度线损预测',
        "tagId": "71515652-6286-4db8-ad32-eba86d1821ff",
        'data': JSON.stringify(jsonZtdata),
        'fedata': JSON.stringify(jsondata),
        'type': 'report'
      }, {
        "tagId": "00e920cd-534f-42df-886c-11a3d1a6b223",
        "tagName": "台区档案总数",
        "data": '2331',
        "fedata": '2331',
        'type': 'data'
      }])
    })
  }, [checkedactiveTags])
  const diffTable = (data, fedata, tagid) => {
    let columnsnow = tagsObjDiffColumns[tagid] || []
    let count = 0;
    data.map((e, i) => {
      for (let key in e) {
        data[i][key + 'fe'] = fedata[i][key];
        if (e[key] != fedata[i][key]) {
          data[i][key + 'diff'] = true;
          count++;
        } else {
          data[i][key + 'diff'] = false;
        }
      }
    })
    return count > 0 ? <Table title={() => <div className={styles.tableDes}>差异对比</div>} scroll={{ x: 'max-content', y: 300 }} pagination={false} columns={columnsnow} dataSource={data} /> : <div>没有差异</div>
  }
  return <div className={styles.homeContainer}>
    <div className={styles.headerPng}>
      <img src={HeaderPng} alt="" />
    </div>
    <div className={styles.tagsWrap}>
      <div className={styles.tagsContainer}>
        {
          tags.map((e: any, i) => {
            return <div key={i} className={styles.tagsItem}>
              <div className={styles.tagsPname}>{e?.name}:</div>
              <div className={styles.tagsChildren}>
                {
                  e.children.map((el: any, il: any) => {
                    return <div className={styles.tagName + ' ' + (activeTags.indexOf(el.id) == -1 ? '' : styles.active)} onClick={() => { TagChange(el.id) }}>{el.name}</div>
                  })
                }
              </div>
            </div>
          })
        }
        <div className={styles.tagsItem}>
          <div className={styles.tagsPname}>时间范围:</div>
          <div className={styles.tagsChildren}>
            <div style={{ width: '20px' }}></div><RangePicker value={[startdate ? moment(startdate) : '', enddate ? moment(enddate) : '']} onChange={(date, datestring) => {
              console.log(datestring);
              setstartdate(datestring[0])
              setendtdate(datestring[1])
            }} />
          </div>
        </div>
        <div className={styles.searchWrap}>
          <Button type="primary" onClick={sure} style={{ width: '140px', height: '40px', fontSize: '18px' }}>确定</Button>
          <Button style={{ marginLeft: '15px', width: '140px', height: '40px', fontSize: '18px' }} onClick={() => setactiveTags([])}>重置</Button>
        </div>
      </div>
    </div>
    <div className={styles.checkTagsWrap}>
      <div>
        <div>已选条件</div>
        <div className={styles.checkedWrap}>
          {
            tags.map((e: any, i) => {
              return <div key={i} className={styles.checkedtagsItem}>
                <div className={styles.checkedtagsPname}>{e?.name}:</div>
                <div className={styles.checkedtagsChildren}>
                  {
                    e.children.map((el: any, il: any) => {
                      return checkedactiveTags.indexOf(el.id) != -1 && <div className={styles.active + ' ' + styles.checkedtagName} onClick={() => { TagChange(el.id) }}>{el.name}</div>
                    })
                  }
                </div>
              </div>
            })
          }
          <div className={styles.checkedtagsItem}>
            <div className={styles.checkedtagsPname}>时间范围:</div>
            <div className={styles.checkedtagsChildren}>
              {surestartdate ? <div className={styles.active + ' ' + styles.checkedtagName}>{surestartdate}</div> : ''}
              {surestartdate && sureenddate && <div style={{ margin: '0 5px 0px 15px' }}> - </div>}
              {sureenddate ? <div className={styles.active + ' ' + styles.checkedtagName}>{sureenddate}</div> : ''}
            </div>
          </div>
        </div>
      </div>
    </div >
    {
      list.map((e, i) => {
        if (e.type == 'report') {
          let data = JSON.parse(e.data);
          let fedata = JSON.parse(e.fedata);
          let tagid = e.tagId;
          let columnsnow = tagsObjColumns[tagid] || []
          return <div className={styles.tableDatas}>
            <div className={styles.tableTitle}>
              {e.tagName}
            </div>
            {/* <div>{e}</div> */}
            <div className={styles.tableWrap}>

              <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }}></div>
              <Table title={() => <div className={styles.tableDes}>数据中台获取数据</div>} scroll={{ x: 'max-content', y: 300 }} pagination={false} columns={columnsnow} dataSource={data} />

              <Table title={() => <div className={styles.tableDes}>业务系统获取数据</div>} scroll={{ x: 'max-content', y: 300 }} pagination={false} columns={columnsnow} dataSource={fedata} />

              {
                diffTable(data, fedata, tagid)
              }
            </div>
          </div>
        } else {
          return <div className={styles.tableDatas}>
            <div className={styles.tableTitle}>
              {e.tagName}
            </div>
            {/* <div>{e}</div> */}
            <div className={styles.tableWrap}>

              <div className={styles.description} dangerouslySetInnerHTML={{ __html: description1 }}></div>
              <div className={styles.tableDes}>数据中台获取数据</div>
              <div className={styles.ssdata}>台区档案总数     {e.data}</div>
              <div className={styles.tableDes}>业务系统获取数据</div>
              <div className={styles.ssdata}>台区档案总数     {e.data}</div>
              <div className={styles.tableDes}>差异对比</div>
              <div className={styles.ssdata}>数据无误</div>
            </div>
          </div>
        }

      })
    }
  </div >
}



let tagsObj = {
  "71515652-6286-4db8-ad32-eba86d1821ff": {//月度线损
    "line_name": "线路名称",
    "mp_no": "计量点编号",
    "gdswdl": "供电上网电量",
    "gdjlddl": "供电计量点电量",
    "gdl": "供电量",
    "sdl": "售电量",
    "rate_loss": "线损率",
    "power_loss": "损失电量",
  },
};

let tagsObjColumns = {

}

let tagsObjDiffColumns = {

}
for (let i in tagsObj) {
  let item = tagsObj[i];
  let columns = [];
  let columns1 = [];
  for (let j in item) {
    columns.push({
      title: item[j],
      dataIndex: j,
      key: j,
    })
    columns1.push({
      title: item[j],
      dataIndex: j,
      key: j,
      render: (txt, record, index) => {
        return <div>
          {record[j + 'diff'] ? <div style={{ backgroundColor: 'red', color: '#fff' }}>
            <div>数据中台数据：{txt}</div>
            <div>业务系统数据：{record['' + j + 'fe']}</div>
          </div> : <div>{txt}</div>}
        </div>
      }
    })
  }
  tagsObjColumns[i] = columns;
  tagsObjDiffColumns[i] = columns1;
}

let description =
  "<p>线路损耗，简称线损。是电能通过输电线路传输而产生的能量损耗。</p><p> </p><p><strong>释义 </strong></p><p>电能通过输电线路传输而产生的能量损耗，简称线损。电力网络中除输送电能的线路外，还有变压器等其他输变电设备,也会产生电能的损耗,这些电能损耗（包括线损在内）的总和称为网损。</p><p><br></p><p> 线损是由电力传输中有功功率的损耗造成的，主要由以下3个部分组成。</p><p><br></p><p> ①由于电流流经有电阻的导线，造成的有功功率的损耗，它是线损的最主要部分式中P、Q、I分别为流经路线的有功功率、无功功率和电流；U为路线上与P、Q同一点测得的电压；R为线路的电阻，与导线的截面、导线的材料和线路的长度有关。</p><p><br></p><p> ②由于线路有电压，而线间和线对接之间的绝缘有漏电，造成的有功功率损耗 ΔPg=U2g 式中g是表征绝缘漏电情况的电导。 </p><p><br></p><p>③电晕损耗：架空输电线路带电部分的电晕放电造成的有功功率损耗。在一般正常情况下，后两部分只占极小的份量。</p><p><br></p><p> 减少线损，节约能量，提高电力传输的效率，是电力部门设计运行工作的主要内容之一。可以从下列几个方面着手降低线损:①提高电力系统的电压水平,包括在其他条件合理的情况下尽可能采用高一级电压送电，在运行中保证电压水平；②使线路中的潮流合理，尤其应尽可能减少线路上无功功率的流动；③选用合理的导线材料和截面</p>"

let description1 =
  "<p>\t<span style=\"color: rgb(51, 51, 51);\">在</span>\t<a href=\"https://baike.baidu.com/item/%E7%94%B5%E5%8A%9B%E7%B3%BB%E7%BB%9F/338401?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">电力系统</a>\t<span style=\"color: rgb(51, 51, 51);\">中，台区是指（一台）变压器的供电范围或区域。它是电力</span>\t<a href=\"https://baike.baidu.com/item/%E7%BB%8F%E6%B5%8E%E8%BF%90%E8%A1%8C/3858178?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">经济运行</a>\t<span style=\"color: rgb(51, 51, 51);\">管理的名词。还有就是在特定语句中是一区域地名。</span></p><p><br></p><h2>台区简介</h2><p><br></p><p>\t<span style=\"color: rgb(51, 51, 51);\">为了</span>\t<a href=\"https://baike.baidu.com/item/%E5%88%9B%E6%96%B0%E8%90%A5%E9%94%80/6346813?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">创新营销</a>\t<a href=\"https://baike.baidu.com/item/%E7%AE%A1%E7%90%86%E6%9C%BA%E5%88%B6/1304450?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">管理机制</a>\t<span style=\"color: rgb(51, 51, 51);\">，统一和规范基层供电</span>\t<a href=\"https://baike.baidu.com/item/%E8%90%A5%E4%B8%9A%E6%89%80/22480565?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">营业所</a>\t<span style=\"color: rgb(51, 51, 51);\">配电台区</span>\t<a href=\"https://baike.baidu.com/item/%E8%90%A5%E9%94%80%E7%AE%A1%E7%90%86/2456?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">营销管理</a>\t<span style=\"color: rgb(51, 51, 51);\">行为，全面推行台区营销</span>\t<a href=\"https://baike.baidu.com/item/%E7%B2%BE%E7%BB%86%E5%8C%96%E7%AE%A1%E7%90%86/10287963?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">精细化管理</a>\t<span style=\"color: rgb(51, 51, 51);\">，提高公司</span>\t<a href=\"https://baike.baidu.com/item/%E7%BB%8F%E8%90%A5%E6%95%88%E7%9B%8A/10247674?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">经营效益</a>\t<span style=\"color: rgb(51, 51, 51);\">。省公司在总结现有台区管理经验的基础上，经过认真调查研究，特制定本办法。</span></p><p><br></p><h2>基本原则</h2><p><br></p><p>\t1公司所属各供电营业所营销管理<a href=\"https://baike.baidu.com/item/%E5%9D%87%E5%BA%94/23111305?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">均应</a>实行台区化<a href=\"https://baike.baidu.com/item/%E7%AE%A1%E7%90%86%E6%96%B9%E5%BC%8F/260899?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">管理方式</a>。即供电营业所按配电台区将营销<a href=\"https://baike.baidu.com/item/%E7%AE%A1%E7%90%86%E8%B4%A3%E4%BB%BB/12742601?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">管理责任</a>落实到人和将营销<a href=\"https://baike.baidu.com/item/%E6%8C%87%E6%A0%87%E5%88%86%E8%A7%A3/3663830?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">指标分解</a>考核到人，实行台区营销指标承包的目标管理方式。</p><p>\t2台区营销管理应以管理规范化为前提，以台区<a href=\"https://baike.baidu.com/item/%E8%B4%A3%E4%BB%BB%E5%88%B6/10964108?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">责任制</a>为基础，以精细化为取向，以实现<a href=\"https://baike.baidu.com/item/%E6%9C%BA%E5%88%B6%E5%88%9B%E6%96%B0/4082302?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">机制创新</a>、企业增效的经营管理目标。</p><p>\t3台区营销管理考核范围为公变台区总表至其供电范围内的各电力客户侧<a href=\"https://baike.baidu.com/item/%E7%94%B5%E8%83%BD%E8%A1%A8/928696?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">电能表</a>之间。变压器台区总表为供电量考核表，电力客户<a href=\"https://baike.baidu.com/item/%E8%B4%B8%E6%98%93%E7%BB%93%E7%AE%97/12673062?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">贸易结算</a>用电能表为售电量考核表。根据管理需要，各供电营业所可以把台区管理延伸到一条线路或一片区域，实行按线路或按区域的承包方式。</p><p>\t4台区营销管理的责任者（以下称台区承包者）可以是员工，也可以是台区管理组。台区营销<a href=\"https://baike.baidu.com/item/%E7%AE%A1%E7%90%86%E5%B2%97%E4%BD%8D/1890855?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">管理岗位</a>既可实行竞标上岗，也可按照一定的程序考核后择优安排。</p><p>\t5提倡建立台区营销管理竞标机制，通过竞争优化台区<a href=\"https://baike.baidu.com/item/%E7%BB%8F%E8%90%A5%E6%8C%87%E6%A0%87/2561220?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">经营指标</a>。供电营业所可以<a href=\"https://baike.baidu.com/item/%E7%BB%BC%E5%90%88%E7%BA%BF%E6%8D%9F%E7%8E%87/7220180?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">综合线损率</a>、均价和电费回收率为主要竞标指标，对辖区内配电台区的营销管理进行公开竞标。竞标者的<a href=\"https://baike.baidu.com/item/%E6%A0%87%E4%B9%A6/407477?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">标书</a>应在标底合理的范围内，严禁恶意竞标。具体竞标程序和办法各供电单位参照有关规定制定。</p><p>\t6供电营业所应建立台区营销管理与<a href=\"https://baike.baidu.com/item/%E8%80%83%E6%A0%B8%E5%88%B6%E5%BA%A6/22462617?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">考核制度</a>，对台区承包者实行<a href=\"https://baike.baidu.com/item/%E5%90%88%E5%90%8C%E7%AE%A1%E7%90%86/4815?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">合同管理</a>，动态考核。设置台区考核管理岗位（或称线路总表管理员），负责台区总表抄录和具体考核工作。用电稽查人员负责对台区承包者的工作质量进行<a href=\"https://baike.baidu.com/item/%E7%9B%91%E7%9D%A3%E6%A3%80%E6%9F%A5/22311399?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">监督检查</a>。上级营销稽查部门和营业所负责人应定期对台区营销管理考核执行情况进行监督和检查。</p><p>\t7供电单位应从企业经营效益和考核结余工资中拿出部分资金，建立台区营销管理考核<a href=\"https://baike.baidu.com/item/%E5%A5%96%E5%8A%B1%E5%9F%BA%E9%87%91/12751267?fromModule=lemma_inlink\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(19, 110, 194);\">奖励基金</a>，用于台区营销管理考核奖惩兑现。</p><p><br></p><p><br></p>"